<template>
	<view class="myTerminal">
		<!-- <navCom navName="我的终端" @previous="previous"></navCom> -->
		<view class="tab-box my-mgt-20">
			<view class="tabBtn" v-for="(item,index) in tabList" :key="index" @click="tabBtn(item)">
				<view class="name">{{item}}</view>
				<view :class="currType==item?'active':''"></view>
			</view>
		</view>
		<!-- 我的终端 -->
		<view v-show="currType==='我的终端'">
			<view class="" v-if="dev.length > 0">
				<view class="card_box my-mgt-10" v-for="(item,index) in dev" :key="index">
					<view class="card_tr_tlt">
						<view class="">{{item.companyName||'--'}}/{{item.brandName||'--'}}</view>
						<view class="" @click="updateStatus(item.id)">
							<text :class="{txt_cl_gray:item.activation,txt_cl_green:item.activation}">{{item.activation?'已激活':'未激活'}}</text>
							<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ZkegpbhMAV_refresh_icon.png" class="img my-mgl-10" mode="" v-if="!item.activation"></image>
						</view>
					</view>
					<view class="card_tr">
						<text>SN：</text>
						<text>{{item.deviceNo||'--'}}</text>
					</view>
					<view class="card_tr">
						<text>商户号：</text>
						<text>{{item.merId||"--"}}</text>
					</view>
					<view class="card_tr">
						<text>状态:</text>
						<text>{{item.status}}</text>
					</view>
					
				</view>
			</view>
			<view class="empty" v-else>
				<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" ></view>
				<view class="pos_btn">
					<button class="btn" @click="applyDevice">申请终端</button>
				</view>
			</view>
			
		</view>
		<!-- pos机具 -->
		<view class="pos" v-show="currType==='绑定设备'">
			<view class="pos_inp my-mgt-20">
				<view class="pos_scan">
					<input type="text" v-model="snnum" placeholder-class="pla_cl" placeholder="请输入设备SN码/扫码" value=""
						class="inp my-pdl-15" />
					<view class="scarn_img" @click="bindScan">
						<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/JFLtmvFZfQ_scan_icon.png" mode=""></image>
					</view>
				</view>
				<view class="pos_scan my-mgt-15">
					<input type="text" v-model="noteTxt" placeholder-class="pla_cl" maxlength="50" placeholder="请输入备注 (50字以内)" value=""
						class="inp my-pdl-15" />
				</view>
				<view class="pos_txt my-mgt-15">
					<text>·为避免绑定错误，请核实所绑定设备属于本人使用</text>
				</view>
				<view class="pos_txt">
					<text>·未查询到库存请核实品牌型号</text>
				</view>
			</view>
			<view class="pos_btn">
				<button class="btn" @click="terminalBind">绑定</button>
			</view>
		</view>
		<u-popup v-model="culshow" mode="center" border-radius="10">
			<view class="pos_mol">
				<view v-if="succtxt">
					<view class="pos_mol_tlt">
						<text>绑定成功</text>
					</view>
					<view class="pos_mol_btn my-mgt-25">
						<button class="pos_mol_btn_txt"  @click="closemodel">确认</button>
					</view>
				</view>
				<view v-else>
					<view class="pos_mol_tlt">
						<text>绑定失败</text>
					</view>
					<view class="pos_mol_point">
						<text>{{cluestxt===null?'出错了':cluestxt}}</text>
					</view>
					<view class="pos_mol_btn">
						<button class="pos_mol_btn_txt" @click="closemodel">知道了</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {terminallistApi,updatestatusApi ,terminalbindApi } from "@/api/home.js"
	export default {
		data() {
			return {
				tabList: ['我的终端', '绑定设备'],
				currType: '我的终端',
				culshow: false,
				pageIndex: 0,
				pageSize: 30,
				total: 1,
				dev: [],
				snnum:null,
				noteTxt:null,
				cluestxt:'',//提示语
				succtxt:null,//用于判断
				scanTypeData:["AZTEC","CODABAR","CODE_39","CODE_93","CODE_128","EAN_8","EAN_13","ITF","MAXICODE","RSS_14","RSS_EXPANDED","UPC_A","UPC_E","UPC_EAN_EXTENSION","CODE_25"],
				
			};
		},
		onLoad() {
			this.getTerminalList()
		},
		methods: {
			closemodel(){
				this.culshow = false
				this.dev = []
				this.total = 1
				this.pageIndex = 0
				this.getTerminalList()
			},
			async updateStatus(id){
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await updatestatusApi(id)
				if(res.statusCode ===200){
					uni.hideLoading()
					this.dev = []
					this.total = 1
					this.pageIndex = 0
					this.getTerminalList()
				}
			},
			async getTerminalList() {
				if (this.dev.length >= this.total) {
					uni.showToast({
						title: "没有更多数据了",
						icon: "none"
					})
					return
				}
				let params = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await terminallistApi(params)
				if (res.statusCode === 200) {
					uni.hideLoading()
					this.dev = [...this.dev,...res.data.data.rows]
					this.total = res.data.data.total
					this.pageIndex++
				}
			},
			bindScan(){
				wx.scanCode({
					scanType: ['barCode'],
					success:(res)=> {
						if(this.scanTypeData.includes(res.scanType)){
							uni.showToast({
								title:"扫描成功",
								icon:"none"
							})
							this.snnum = res.result
						}else{
							uni.showToast({
								title:"扫码错误！请扫条形码",
								icon:"none"
							})
						}
					},
					fail:()=>{
						uni.showToast({
							title:"扫描失败！请重新扫描",
							icon:"none"
						})
					}
				})
			},
			
			applyDevice(){
				//debugger;
				uni.navigateTo({
					url:"/pages/main/childPages/deviceApply"
				})
				
				
			},
			
			async terminalBind(){
				try{
					if(this.snnum===''){
						uni.showToast({
							title:"SN码不能为空",
							icon:"none"
						})
						return;
					}
					let params = {
						deviceNo:this.snnum,
						remark:this.noteTxt===null?'':this.noteTxt
					}
					uni.showLoading({
						title:"正在加载中...."
					})
					const res = await terminalbindApi(params)
					if(res.statusCode===200){
						uni.hideLoading()
						this.culshow =true
						this.succtxt = true
					}
				}catch(e){
					uni.hideLoading()
					if(e.statusCode ===400){
						this.culshow =true
						this.succtxt = false
						this.cluestxt = e.data.message
					}
				}
			},
			tabBtn(item) {
				this.currType = item
			},
			tabpos(t) {
				this.currpos = t
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myTerminal {
		width: 100%;

		.tab-box {
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;

			.tabBtn {
				width: 50%;
				height: 100%;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.name {
					width: 100%;
					height: 10%;
					text-align: center;
				}

				.active {
					width: 70rpx;
					height: 6rpx;
					background: #F05329;
				}
			}
		}

		.card_box {
			width: 690rpx;
			height: 300rpx;
			margin: auto;
			background: #ffff7f;
			box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;

			.card_tr,
			.card_tr_tlt {
				width: 100%;
				height: 50rpx;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.card_tr_tlt {
				height: 90rpx;
				justify-content: space-between;
				padding-right: 30rpx;

				.txt_cl_gray {
					color: #B3B3B3;
				}

				.txt_cl_green {
					color: #4AD85C;
				}
				.img{
					width: 26rpx;
					height: 26rpx;
				}
			}
		}

		// pos机具
		.pos {
			width: 100%;

			.pos_inp {
				width: 100%;
				height: 450rpx;
				padding: 0rpx 30rpx 0rpx 30rpx;

				.pos_scan {
					width: 100%;
					height: 100rpx;
					border-bottom: 1rpx solid #E8E8E8;
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
					}

					.inp {
						width: 80%;
						height: 100%;
					}
					.scarn_img{
						width: 20%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.pla_cl {
						font-size: 28rpx;
						font-weight: 500;
						color: #CCCCCC;
					}
				}

				.pos_txt {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
				}
			}
			
			
			

			.pos_btn {
				width: 100%;
				height: 88rpx;
				position: absolute;
				left: 0rpx;
				bottom: 90rpx;
				.btn {
					width: 690rpx;
					height: 88rpx;
					line-height: 88rpx;
					margin: auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.pos_mol {
			width: 560rpx;
			height: 355rpx;
			background: #FFFFFF;

			.pos_mol_tlt {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #000000;
			}

			.pos_mol_point {
				width: 100%;
				height: 150rpx;
				text-align: center;
				padding: 0rpx 30rpx 0rpx 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 50rpx;
			}

			.pos_mol_btn {
				width: 100%;
				height: 70rpx;

				.pos_mol_btn_txt {
					width: 350rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					margin: auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FEFEFE;
				}
			}
		}
	}
	
	.btn{
		    width: 600rpx;
		    height: 110rpx;
		    border-radius: 50rpx;
		    background: #ff5500;
			margin-top: 3rem;
	}
</style>
